<template>
  <el-tabs v-model="tabName" type="card" size="large" @tab-click="handleTabClick">
    <el-tab-pane name="success">
      <template #label>
        <el-badge :value="successList.length" type="success">
          <p>校验成功</p>
        </el-badge>
      </template>
      <el-table :data="successList" stripe :style="{ maxHeight: '500px', overflowY: 'auto' }">
        <!-- 添加序号列 -->
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column v-for="column in confirmTableSuccessColumns" :key="column.key" :label="column.title"
          :prop="column.key" />
      </el-table>
      <div class="mt-20 w-full flex justify-end">
        <el-button v-if="!isConfirm" type="primary" :loading="loading" @click="importSuccess">
          确认保存
        </el-button>
      </div>
    </el-tab-pane>
    <el-tab-pane name="fail">
      <template #label>
        <el-badge :value="failList.length" type="error">
          <p>校验失败</p>
        </el-badge>
      </template>
      <el-table :data="failList" stripe :style="{ maxHeight: '500px', overflowY: 'auto' }">
        <!-- 添加序号列 -->
        <el-table-column type="index" label="序号" width="60" />
        <el-table-column v-for="column in confirmTableFailColumns" :key="column.key" :label="column.title"
          :prop="column.key" />
      </el-table>
      <div class="mt-20 w-full flex justify-end">
        <el-button type="warning" :loading="loading" @click="exportFail">
          导出Excel
        </el-button>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>


<script setup>
import { ref, onMounted } from 'vue';
import { confirmImportInfo, exportFailInfo } from '../../../api';


const confirmTableSuccessColumns = ref([
  { title: '区域', key: 'areaNum', width: 120 },
  { title: '档口号', key: 'stallNum', width: 200 },
  { title: '店长姓名', key: 'username', width: 120 },
  { title: '单品', key: 'product', width: 120 },
  { title: '店长联系方式', key: 'phone', width: 120 },
  { title: '备注', key: 'intro', width: 180 },
]);

const confirmTableFailColumns = ref([
  { title: '区域', key: 'areaNum', width: 120 },
  { title: '档口号', key: 'stallNum', width: 200 },
  { title: '店长姓名', key: 'username', width: 120 },
  { title: '单品', key: 'product', width: 120 },
  { title: '店长联系方式', key: 'phone', width: 120 },
  { title: '备注', key: 'intro', width: 180 },
  { title: '失败原因', key: 'failReason', width: 180 }
]);

const props = defineProps({
  uuid: String,
  successList: Array,
  failList: Array
});

const emit = defineEmits(['close', 'reloadList']);

const isConfirm = ref(false);
const tabName = ref('success');
const loading = ref(false);

async function exportFail() {
  if (props.failList.length === 0) {
    ElMessage.error('当前没有导入失败的信息');
    return;
  }
  loading.value = true;
  try {
    await exportFailInfo(props.uuid);
  } finally {
    loading.value = false;
  }
}



async function importSuccess() {
  if (props.successList.length === 0) {
    ElMessage.warning('没有校验成功的数据');
    return;
  }
  loading.value = true;
  try {
    const { code } = await confirmImportInfo(props.uuid);
    if (code !== 200) {
      ElMessage.error('请确认上传内容是否重复');
      return;
    }
    ElMessage.success('保存成功');
    isConfirm.value = true;
    if (props.failList.length === 0) {
      emit('close');
    } else {
      tabName.value = 'fail';
    }
  } finally {
    loading.value = false;
  }
}

onMounted(() => {
  if (props.successList.length === 0) {
    tabName.value = 'fail';
  }
});
</script>

<style scoped>
.mt-20 {
  margin-top: 20px;
}

.w-full {
  width: 100%;
}

.flex {
  display: flex;
}

.justify-end {
  justify-content: flex-end;
}
</style>
